<template>
  <BetterScroll ref="Bs">
    <div class="btn">
      <el-button type="success" @click="handleAdd"
        ><el-icon><circle-plus /></el-icon>增加</el-button
      >
    </div>

    <el-table
      ref="multipleTableRef"
      :data="state.tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="商品编号" show-overflow-tooltip>
        <template #default="scope">{{ scope.row.goodsId }} </template>
      </el-table-column>
      <el-table-column
        property="goodsName"
        label="商品名"
        show-overflow-tooltip
      />
      <el-table-column property="tag" label="商品简介" show-overflow-tooltip />
      <el-table-column label="商品照片" show-overflow-tooltip>
        <template #default="scope">
          <img
            style="width: 100px; height: 100px"
            :key="scope.row.goodsId"
            :src="scope.row.goodsCoverImg"
            alt="商品主图"
          />
        </template>
      </el-table-column>
      <el-table-column
        property="stockNum"
        label="商品库存"
        show-overflow-tooltip
      />
      <el-table-column
        property="sellingPrice"
        label="商品售价"
        show-overflow-tooltip
      />
      <el-table-column label="上架状态" show-overflow-tooltip>
        <template #default="scope">
          <p style="color: green" v-if="scope.row.goodsSellStatus == 0">
            销售中
          </p>
          <p style="color: red" v-else>已下架</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template #default="scope">
          <a href="#" class="mya" @click.prevent="change(scope.row.goodsId)"
            >修改</a
          >
          <a
            href="#"
            class="mya"
            v-if="scope.row.goodsSellStatus == 0"
            @click="up(scope.row.goodsId, 1)"
            >下架</a
          >
          <a href="#" class="mya" v-else @click="up(scope.row.goodsId, 0)"
            >上架</a
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="fenye">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="state.total"
        :page-size="state.pageSize"
        :current-page="state.currentPage"
        @current-change="changePage"
      >
      </el-pagination>
    </div>
  </BetterScroll>
</template>

<script>
import BetterScroll from "@/components/betterscroll/BetterScroll.vue"

export default {
  components: {
    BetterScroll,
  },
  mounted() {},
}
</script>

<script setup>
import { ref, reactive, onMounted } from "vue"
import axios from "@/utils/axios"
import { useRoute, useRouter } from "vue-router"
import { ElMessage } from "element-plus/lib/components"

const multipleTableRef = ref()
const multipleSelection = ref([])
const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value.clearSelection()
  }
}
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const router = useRouter()
const route = useRoute()

const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  multipleSelection: [], // 选中项
  total: 0, // 总条数
  currentPage: 1, // 当前页
  pageSize: 10, // 分页大小
})
const addGood = ref(null)

//请求数据
const getGoodList = () => {
  state.loading = true
  axios
    .get("/goods/list", {
      params: {
        pageNumber: state.currentPage,
        pageSize: state.pageSize,
      },
    })
    .then((res) => {
      state.tableData = res.list
      state.total = res.totalCount
      state.currentPage = res.currPage
      state.loading = false
      console.log(res.list)
    })
}

// 添加数据
const handleAdd = () => {
  router.push("/home/addgoods")
}

//操作上架还是下架
const up = (id, status) => {
  axios
    .put(`/goods/status/${status}`, {
      ids: id ? [id] : [],
    })
    .then(() => {
      ElMessage.success("修改成功")
      getGoodList()
    })
}

// 修改数据
const change = (id) => {
  router.push({ path: "/home/addgoods", query: { id } })
}

//请求分页的数量
const changePage = (val) => {
  state.currentPage = val
  getGoodList()
}

//页面渲染是发起请求
getGoodList()
</script>

<style scoped>
.el-button {
  margin: 20px;
}
.fenye {
  position: relative;
  height: 70px;
}
.el-pagination {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mya {
  margin-left: 15px;
  text-decoration: none;
  color: #689eff;
}
</style>
